<template>
    <el-form label-width="auto" :model="modelValue" ref="formRef" :rules="rules">
        <el-form-item label="银行账户" prop="accountNo">
            <el-input placeholder="请输入银行卡号" v-model="modelValue.accountNo" />
        </el-form-item>
        <el-form-item label="账户类型" prop="accountType">
            <div class="readonly" v-if="currentAccountData.memberType != 3">目前支持{{ accountType }}</div>
            <el-radio-group v-model="modelValue.accountType" v-else>
                <el-radio label="对私" value="INDIVIDUAL"></el-radio>
                <el-radio label="对公" value="ENTERPRISE"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="银行卡类型" prop="cardType">
            <div class="readonly">目前支持借记卡类型</div>
        </el-form-item>
        <el-form-item label="开户银行" prop="bankCode">
            <el-select-v2 v-model="modelValue.bankCode" filterable remote :remote-method="searchBank" clearable
                :options="bankList" placeholder="请输入" style="flex: 1;" :props="prop" />
        </el-form-item>
        <el-form-item label="联行号" prop="bankBranchCode">
            <el-input placeholder="请输入联行号" v-model="modelValue.bankBranchCode" />
        </el-form-item>
        <template v-if="modelValue.accountType == 'ENTERPRISE'">
            <el-form-item label="开户行省份" prop="provinceName">
                <el-input placeholder="请输入省份名称" v-model="modelValue.provinceName" />
            </el-form-item>
            <el-form-item label="开户行城市" prop="cityName">
                <el-input placeholder="请输入城市名称" v-model="modelValue.cityName" />
            </el-form-item>
            <el-form-item label="打款验证" prop="amount">
                <div class="space">
                    <el-input placeholder="请输入收到的银行打款金额，单位分" type="primary"
                        :disabled="!isBankCard(modelValue.accountNo)" v-model="modelValue.amount" />
                    <el-button type="primary" :disabled="allowBind" @click="send">打款</el-button>
                </div>
            </el-form-item>
        </template>
        <template v-else-if="modelValue.accountType == 'INDIVIDUAL'">
            <el-form-item label="银行预留手机" prop="reservedMobileNumber">
                <el-input placeholder="请输入" v-model="modelValue.reservedMobileNumber" />
            </el-form-item>
            <el-form-item label="验证码" prop="verifyCode">
                <div class="space">
                    <el-input placeholder="请输入" v-model="modelValue.verifyCode" />
                    <el-button type="primary" v-if="!sendCodeStatus.status"
                        :disabled="!isIphoneLegitimate(modelValue.reservedMobileNumber)" @click="send">获取验证码</el-button>
                    <el-button v-else>重新获取({{ sendCodeStatus.time }}s)</el-button>
                </div>
            </el-form-item>
        </template>
    </el-form>
</template>

<script setup>
import { onMounted, ref, computed, watch } from 'vue';
import { getSupportBankList } from "@/apis/purse";
import { required, mobile, code, length } from "../../rules";
import { isIphoneLegitimate } from "@/utils";
import { isBankCard } from "@/utils/validate";

const props = defineProps({
    modelValue: {
        type: Object,
        required: true
    },
    sendCodeStatus: {
        type: Object,
        required: true
    },
    currentAccountData: {
        type: Object,
        required: true
    },
    allowBind: {
        type: Boolean,
        default: false
    }
})

const accountType = computed(() => {
    return props.currentAccountData.memberType == 1 ? '对私' : '对公'
})
const emit = defineEmits(['sendCode', 'update:modelValue']);
const send = () => {
    formRef.value.validateField([
        'accountNo',
        'reservedMobileNumber',
        'cityName',
        'provinceName',
        'bankBranchCode',
        'bankCode', ''
    ], (valid) => {
        if (valid) emit('sendCode')
    })
}
watch(() => props.modelValue.accountType, () => {
    emit('update:modelValue', {
        cardType: 'DEBIT_CARD',
        accountNo: props.modelValue.accountNo,
        accountType: props.modelValue.accountType
    })
})
/**
 * 模糊查询银行
 */
const searchBank = (key) => {
    keyword.value = key;
}
const prop = {
    value: 'bankCode',
    label: 'bankName'
}
const bankListData = ref([])
/**
 * 可用银行列表
 */
const bankList = computed(() => bankListData.value.filter(item => item.bankName.indexOf(keyword.value) !== -1))
const keyword = ref();

/**
 * 获取可用银行列表
 */
const getBankList = async () => {
    try {
        const res = await getSupportBankList()
        bankListData.value = res.data;
    } catch (error) {

    }
}
const defaultRules = {
    accountNo: [
        required('请输入银行卡号'),
        length(16, 19, '银行卡号')
    ],
    accountType: required('请选择账户类型'),
    bankCode: required('请选择开户银行'),
    bankBranchCode: code(12, '联行号'),
    amount: [
        required('请输入收款金额'),
        { pattern: /^[1-9]\d*$/, message: '请输入正确的收款金额' }
    ],
    verifyCode: [
        code(6),
        required('请输入验证码'),
    ],
    reservedMobileNumber: [mobile,
        required('请输入银行预留手机号'),
    ],
    cardType: [
        required('请选择银行卡类型'),
    ],
}

const rules = computed(() => {
    if (props.modelValue.bankCode == 103) {
        return {
            ...defaultRules,
            provinceName: [
                required('请选择开户行所在省份'),
                length(2, 10, '开户行所在省份')
            ],
            cityName: [
                required('请选择开户行所在城市'),
                length(2, 10, '开户行所在城市')
            ],
        }
    } else {
        return defaultRules;
    }
})
const formRef = ref()
const validate = () => {
    return new Promise((resolve) => {
        formRef.value.validate(valid => {
            resolve(valid)
        })
    })
}
const resetFields = () => {
    return formRef.value.resetFields()
}
defineExpose({
    validate,
    resetFields
})
onMounted(() => {
    getBankList()
})
</script>

<style lang="scss" scoped></style>